<template>
	<view class="flex info-label  font-size-12  ptb-1 pr-1 br-2" :class="'info-label_'+type">
		<view class="plr-4 title ptb-2" style="border-radius: 0px 4px 4px 4px;">
			<slot v-if="$slots.title" name="title"></slot>
			<text v-else>{{title}}</text>
		</view>
		<view class="plr-4 ptb-2 value text-center text-overflow  " style="min-width: 80rpx;"
			:style="{maxWidth:maxWidth+'rpx'}">
			{{value}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "z-info-label",
		props: {
			title: {
				type: [String, Number],
			},
			value: {
				type: [String, Number],
			},
			maxWidth: {
				type: Number,
				default: 100
			},
			type: {
				type: String,
				default: "fblue"
			}
		},
		data() {
			return {

			};
		},
		mounted() {
			console.log(this.$slots)
		}
	}
</script>

<style lang="scss">
	$green:(bg:linear-gradient(270deg, #28FA08 0%, #B2FD6D 100%), leftColor:#151714, rightColor:#ffffff, rightBg:#151714);
	$dark:(bg:#6E716E, leftColor:#ffffff, rightColor:#6E716E, rightBg:#151714);
	$yellow:(bg:#FE9800, leftColor:#151714, rightColor:#ffffff, rightBg:#151714);
	$blue:(bg:#25406F, leftColor:#FEDCC7, rightColor:#462A18, rightBg:#FEDCC7);
	$theme:(green:$green, dark:$dark, yellow:$yellow,blue:$blue);

	@each $k,
	$v in $theme {
		.info-label.info-label_#{$k} {
			background: map-get($v, bg);

			>.title {
				color: map-get($v, leftColor);
			}

			>.value {
				background: map-get($v, rightBg);
				color: map-get($v, rightColor);
			}
		}
	}
</style>
